<sqx-modal-dialog (dialogClose)="emitClose()" flexBody="true" fullHeight="true" hasTabs="false" size="lg">
    <ng-container title> {{ "assets.selectMany" | sqxTranslate }} </ng-container>
    <ng-container tabs>
        <div class="row gx-2 mt-3 mb-3">
            <div class="col-auto">
                <button class="btn btn-text-secondary" (click)="reload()" type="button"><i class="icon-reset"></i></button>
            </div>

            <div class="col">
                <div class="row g-0 search">
                    <div class="col-6">
                        <sqx-tag-editor
                            class="tags"
                            [itemsSource]="assetsState.tagsNames | async"
                            [ngModel]="assetsState.selectedTagNames | async"
                            (ngModelChange)="selectTags($event)"
                            placeholder="{{ 'assets.searchByTags' | sqxTranslate }}"
                            styleScrollable="true"
                            undefinedWhenEmpty="false" />
                    </div>

                    <div class="col-6">
                        <sqx-search-form
                            enableShortcut="true"
                            formClass="form"
                            placeholder="{{ 'assets.searchByName' | sqxTranslate }}"
                            [queriesTypes]="'common.assets' | sqxTranslate"
                            [query]="assetsState.query | async"
                            (queryChange)="search($event)" />
                    </div>
                </div>
            </div>

            <div class="col-auto">
                <div class="btn-group" data-toggle="buttons">
                    <button
                        class="btn btn-secondary btn-toggle"
                        [class.btn-primary]="snapshot.isListView"
                        (click)="changeView(true)"
                        [disabled]="snapshot.isListView"
                        type="button">
                        <i class="icon-list"></i>
                    </button>
                    <button
                        class="btn btn-secondary btn-toggle"
                        [class.btn-primary]="!snapshot.isListView"
                        (click)="changeView(false)"
                        [disabled]="!snapshot.isListView"
                        type="button">
                        <i class="icon-grid"></i>
                    </button>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container content>
        <sqx-list-view [isLoading]="assetsState.isLoading | async" overflow="true">
            <ng-container content>
                <sqx-assets-list
                    (assetSelect)="selectAsset($event)"
                    [assetsState]="assetsState"
                    [isDisabled]="true"
                    [isListView]="snapshot.isListView"
                    [selectedIds]="snapshot.selectedAssets" />
            </ng-container>
            <ng-container footer>
                <sqx-pager (loadTotal)="reloadTotal()" [paging]="assetsState.paging | async" (pagingChange)="assetsState.page($event)" />
            </ng-container>
        </sqx-list-view>
    </ng-container>
    <ng-container footer>
        <button class="btn btn-text-secondary" (click)="emitClose()" type="button">{{ "common.cancel" | sqxTranslate }}</button>
        <button class="btn btn-success" (click)="emitSelect()" [disabled]="snapshot.selectionCount === 0" type="submit">
            {{ "assets.linkSelected" | sqxTranslate: { count: snapshot.selectionCount } }})
        </button>
    </ng-container>
</sqx-modal-dialog>
